ããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå 床ã«çŠç¹ãåœãŠãReactã®å®éšçãªexperimental_Offscreenã³ã³ããŒãã³ãã培åºè§£èª¬ãéèŠã§ãªãæŽæ°ãæŠç¥çã«é å»¶ãããããšã§ãããã©ãŒãã³ã¹ãæé©åãããŠãŒã¶ãŒäœéšãåäžãããæ¹æ³ãåŠã³ãŸãã
ããã©ãŒãã³ã¹ãè§£ãæŸã€ïŒããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå 床ã§Reactã®experimental_Offscreenã䜿ãããªã
é²åãç¶ããããã³ããšã³ãéçºã®äžçã«ãããŠãããã©ãŒãã³ã¹ã¯æãéèŠã§ããUIãé
ããšããŠãŒã¶ãŒã®äžæºãé¢è±ã«ã€ãªãããããŸããããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ãæ§ç¯ããããã®äž»èŠãªJavaScriptã©ã€ãã©ãªã§ããReactã¯ãããã©ãŒãã³ã¹ãæé©åããããã®ããŸããŸãªããŒã«ãšãã¯ããã¯ãæäŸããŠããŸããäžã§ãç¹ã«è峿·±ã匷åãªããŒã«ããããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå
床ãšçµã¿åãããå Žåã®experimental_Offscreenã³ã³ããŒãã³ãã§ãã
ãã®å
æ¬çãªã¬ã€ãã§ã¯ãexperimental_Offscreenã®è€éãªä»çµã¿ãšãããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå
åºŠãæŽ»çšããŠãããã¹ã ãŒãºã§å¿çæ§ã®é«ãReactã¢ããªã±ãŒã·ã§ã³ãäœæããæ¹æ³ã«ã€ããŠè©³ãã解説ããŸããåºæ¬çãªæŠå¿µãæ¢æ±ããå®è·µçãªäŸãæäŸãããã®å®éšçãªæ©èœã®å¯èœæ§ãæå€§éã«åŒãåºãããã®å®çšçãªæŽå¯ãæäŸããŸãã
experimental_Offscreenãšã¯ïŒ
experimental_Offscreenã¯ãã¢ããªã±ãŒã·ã§ã³ã®äžéšãå¿
èŠã«ãªããŸã§ã¬ã³ããªã³ã°ãé
å»¶ãããããšã§ããã©ãŒãã³ã¹ãåäžãããããã«èšèšããããå®éšçãªReactã³ã³ããŒãã³ãã§ããUIã®äžéšããåçµããããå¿
èŠãªãšãã«ã®ã¿æŽæ°ããæ¹æ³ã ãšèããŠãã ããã
åŸæ¥ãReactã¯ã³ã³ããŒãã³ããç©æ¥µçã«ã¬ã³ããªã³ã°ããŸããã€ãŸããã³ã³ããŒãã³ãã®propsãstateã倿ŽããããšãReactã¯å³åº§ã«ãã®ã³ã³ããŒãã³ããšåèŠçŽ ãåã¬ã³ããªã³ã°ããŸãããã®ã¢ãããŒãã¯å€ãã®ã¢ããªã±ãŒã·ã§ã³ã§ããŸãæ©èœããŸãããè€éãªUIããŠãŒã¶ãŒã«ããã«ã¯è¡šç€ºãããªãã³ã³ããŒãã³ããæ±ãå Žåãããã«ããã¯ã«ãªãå¯èœæ§ããããŸãã
experimental_Offscreenã¯ããã®ç©æ¥µçãªã¬ã³ããªã³ã°ãåé¿ããã¡ã«ããºã ãæäŸããŸããã³ã³ããŒãã³ãã<Offscreen>ã§ã©ããããããšã§ããã®ã³ã³ããŒãã³ãããã€ã¬ã³ããªã³ã°ãŸãã¯æŽæ°ãããããå¶åŸ¡ã§ããŸããããã«ããã衚瀺ãããŠããéèŠãªã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãåªå
ããéèŠåºŠã®äœãã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãåŸåãã«ããããšãå¯èœã«ãªããŸãã
ããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå 床ã®å
ããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå
床ã䜿çšãããšãexperimental_Offscreenã®ã¬ã³ããªã³ã°åäœãããã«çްãã調æŽã§ããŸãã<Offscreen>ã®modeããããã£ã'background'ã«èšå®ããããšã§ãReactã«å¯ŸããŠãªãã¹ã¯ãªãŒã³ã³ã³ãã³ããäœãåªå
床ã§ã¬ã³ããªã³ã°ããããã«æç€ºããŸããããã¯ããã©ãŠã¶ãã¢ã€ãã«ç¶æ
ã®ãšãã«Reactãã¬ã³ããªã³ã°äœæ¥ãå®äºããããšè©Šã¿ãããšãæå³ããã¡ã€ã³ã¹ã¬ãããžã®åœ±é¿ãæå°éã«æããã«ã¯ã€ãã®ããã¢ãã¡ãŒã·ã§ã³ãé
ãã€ã³ã¿ã©ã¯ã·ã§ã³ãé²ããŸãã
ããã¯ãããã«ã¯è¡šç€ºãããªãããŸãã¯ã€ã³ã¿ã©ã¯ãã£ãã§ãªãã³ã³ããŒãã³ãã«ç¹ã«åœ¹ç«ã¡ãŸããäŸãã°ã以äžã®ãããªãã®ã§ãã
- ãªãã¹ã¯ãªãŒã³ã³ã³ãã³ãïŒæåã«é衚瀺ã«ãªã£ãŠããããŸãã¯ãã¥ãŒããŒãã®å€ã«ããã³ã³ãã³ãïŒäŸïŒã¹ã¯ããŒã«ããªããšèŠããªãã³ã³ãã³ãïŒã
- é å»¶èªã¿èŸŒã¿ãããç»åïŒè¡šç€ºãããããã«ãªã£ããšãã«ã®ã¿èªã¿èŸŒãŸããç»åã
- é »ç¹ã«æŽæ°ãããªãã³ã³ããŒãã³ãïŒé »ç¹ãªåã¬ã³ããªã³ã°ãå¿ èŠãšããªãã³ã³ããŒãã³ãïŒäŸïŒå±¥æŽããŒã¿ãèšå®ããã«ïŒã
- å°æ¥ã®ã³ã³ãã³ãã®äºåã¬ã³ããªã³ã°ïŒè¿ãå°æ¥ã«è¡šç€ºãããèŠçŽ ã
ããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå 床ã䜿çšããããšã§ããããã®ã³ã³ããŒãã³ããã¡ã€ã³ã¹ã¬ããããããã¯ããããšãªãã¬ã³ããªã³ã°ãããããšãä¿èšŒããããã¹ã ãŒãºã§å¿çæ§ã®é«ããŠãŒã¶ãŒäœéšãå®çŸã§ããŸãã
å®è·µçãªäŸãšãŠãŒã¹ã±ãŒã¹
experimental_Offscreenãšããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå
床ã䜿çšããŠReactã¢ããªã±ãŒã·ã§ã³ãæé©åããå®è·µçãªäŸãããã€ãèŠãŠã¿ãŸãããã
äŸ1ïŒç»åã®é å»¶èªã¿èŸŒã¿
æ°çŸæã®ç»åããããã©ãã®ã£ã©ãªãŒãæ³åããŠã¿ãŠãã ããããã¹ãŠã®ç»åãäžåºŠã«èªã¿èŸŒãã®ã¯éåžžã«éå¹ççã§ãæåã®ããŒãžèªã¿èŸŒã¿ã倧å¹
ã«é
ãããå¯èœæ§ããããŸãã代ããã«ãexperimental_Offscreenã䜿çšããŠããŠãŒã¶ãŒãããŒãžãã¹ã¯ããŒã«ããã«ã€ããŠç»åãé
å»¶èªã¿èŸŒã¿ãããããšãã§ããŸãã
ãŸããå®éšçãªReactããã±ãŒãžãã€ã³ã¹ããŒã«ããå¿ èŠããããŸãïŒæ³šæïŒããã¯å®éšçãªAPIã§ããã倿Žãããå¯èœæ§ããããŸãïŒïŒ
npm install react@experimental react-dom@experimental
以äžã«ãã®å®è£ æ¹æ³ã瀺ããŸãïŒ
import React, { useState, useEffect } from 'react';
import { unstable_Offscreen as Offscreen } from 'react';
function ImageComponent({ src, alt }) {
const [isVisible, setIsVisible] = useState(false);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setIsVisible(true);
observer.unobserve(entry.target);
}
});
},
{ threshold: 0.2 }
);
const element = document.getElementById(src);
if (element) {
observer.observe(element);
}
return () => {
if (element) {
observer.unobserve(element);
}
};
}, [src]);
return (
<Offscreen mode="background" id={src}>
<div style={{ height: '200px', width: '300px', backgroundColor: '#eee', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
{isVisible ? <img src={src} alt={alt} style={{ maxWidth: '100%', maxHeight: '100%' }} /> : <span>èªã¿èŸŒã¿äž...</span>}
</div>
</Offscreen>
);
}
function Gallery() {
const images = [
{ src: 'image1.jpg', alt: 'ç»å1' },
{ src: 'image2.jpg', alt: 'ç»å2' },
{ src: 'image3.jpg', alt: 'ç»å3' },
// ... more images
];
return (
<div>
{images.map((image, index) => (
<ImageComponent key={index} src={image.src} alt={image.alt} />
))}
</div>
);
}
export default Gallery;
ãã®äŸã§ã¯ãImageComponentã¯IntersectionObserverã䜿çšããŠç»åã衚瀺ãããŠãããã©ãããæ€åºããŸããç»åããã¥ãŒã«å
¥ããšãisVisibleã®ç¶æ
ãtrueã«èšå®ãããç»åã®èªã¿èŸŒã¿ãããªã¬ãŒãããŸãã<Offscreen mode="background">ã³ã³ããŒãã³ãã¯ãç»åã®ã¬ã³ããªã³ã°ãããã¯ã°ã©ãŠã³ãåªå
ã§è¡ãããããšãä¿èšŒããã¡ã€ã³ã¹ã¬ããã®ããããã³ã°ãé²ããŸãã
äŸ2ïŒã¹ã¯ããŒã«ããªããšèŠããªãã³ã³ãã³ãã®äºåã¬ã³ããªã³ã°
ããäžã€ã®äžè¬çãªãŠãŒã¹ã±ãŒã¹ã¯ãã¹ã¯ããŒã«ããªããšèŠããªãïŒã€ãŸããããã«ã¯è¡šç€ºãããªãïŒã³ã³ãã³ããäºåã«ã¬ã³ããªã³ã°ããããšã§ããããã«ããããŠãŒã¶ãŒãã¹ã¯ããŒã«ããŠã³ãããšããã«ã³ã³ãã³ãã衚瀺ãããæºåãæŽããããã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãåäžãããããšãã§ããŸãã
import React, { useState, useEffect } from 'react';
import { unstable_Offscreen as Offscreen } from 'react';
function BelowTheFoldContent() {
return (
<div style={{ padding: '20px', border: '1px solid #ccc' }}>
<h2>ã¹ã¯ããŒã«ããªããšèŠããªãã³ã³ãã³ã</h2>
<p>ãã®ã³ã³ãã³ãã¯Offscreenã䜿çšããŠããã¯ã°ã©ãŠã³ãã§äºåã¬ã³ããªã³ã°ãããŸãã</p>
</div>
);
}
function MainComponent() {
const [showContent, setShowContent] = useState(false);
useEffect(() => {
// ã³ã³ãã³ãã衚瀺ããåã®é
å»¶ãã·ãã¥ã¬ãŒã
const timer = setTimeout(() => {
setShowContent(true);
}, 2000);
return () => clearTimeout(timer);
}, []);
return (
<div>
<h1>ã¡ã€ã³ã³ã³ããŒãã³ã</h1>
<p>ããã¯ããŒãžã®ã¡ã€ã³ã³ã³ãã³ãã§ãã</p>
<div style={{ height: '500px', overflow: 'hidden' }}></div> {/* ã¹ã¯ããŒã«ããªããšèŠããªãã³ã³ãã³ãã®äžã«ããã³ã³ãã³ããã·ãã¥ã¬ãŒã */}
<Offscreen mode="background">
{showContent && <BelowTheFoldContent />}
</Offscreen>
</div>
);
}
export default MainComponent;
ãã®äŸã§ã¯ãBelowTheFoldContentã¯<Offscreen mode="background">ã³ã³ããŒãã³ãã§ã©ãããããŠããŸããããã«ããããŠãŒã¶ãŒãã¹ã¯ããŒã«ããŠèŠãåã§ããã³ã³ãã³ããããã¯ã°ã©ãŠã³ãã§äºåã«ã¬ã³ããªã³ã°ãããããšãä¿èšŒãããŸããããã§ã¯ã³ã³ãã³ãã衚瀺ããåã®é
å»¶ãã·ãã¥ã¬ãŒãããŠããŸããshowContentãtrueã«ãªããšãBelowTheFoldContentã衚瀺ãããŸããããã®æã«ã¯ãã§ã«ã¬ã³ããªã³ã°ãå®äºããŠãããããã¹ã ãŒãºãªé·ç§»ãå®çŸããŸãã
äŸ3ïŒè€éãªã³ã³ããŒãã³ãã®æé©å
é«ã³ã¹ããªèšç®ãããŒã¿ååŸãè¡ãè€éãªã³ã³ããŒãã³ãããããšããŸãããã®ã³ã³ããŒãã³ããç©æ¥µçã«ã¬ã³ããªã³ã°ãããšãã¢ããªã±ãŒã·ã§ã³å šäœã®ããã©ãŒãã³ã¹ã«æªåœ±é¿ãäžããå¯èœæ§ããããŸãã
import React, { useState, useEffect } from 'react';
import { unstable_Offscreen as Offscreen } from 'react';
function ExpensiveComponent() {
const [data, setData] = useState(null);
useEffect(() => {
// é«ã³ã¹ããªããŒã¿ååŸåŠçãã·ãã¥ã¬ãŒã
const fetchData = async () => {
await new Promise((resolve) => setTimeout(resolve, 1000)); // ãããã¯ãŒã¯é
å»¶ãã·ãã¥ã¬ãŒã
setData({ value: Math.random() });
};
fetchData();
}, []);
if (!data) {
return <div>èªã¿èŸŒã¿äž...</div>;
}
return (
<div style={{ padding: '20px', border: '1px solid #ccc' }}>
<h2>é«ã³ã¹ããªã³ã³ããŒãã³ã</h2>
<p>å€: {data.value}</p>
</div>
);
}
function App() {
const [showExpensive, setShowExpensive] = useState(false);
return (
<div>
<h1>Appã³ã³ããŒãã³ã</h1>
<button onClick={() => setShowExpensive(!showExpensive)}>
é«ã³ã¹ããªã³ã³ããŒãã³ããåãæ¿ã
</button>
<Offscreen mode="background" visible={showExpensive}>
<ExpensiveComponent />
</Offscreen>
</div>
);
}
export default App;
ãã®äŸã§ã¯ãExpensiveComponentãé«ã³ã¹ããªããŒã¿ååŸåŠçãã·ãã¥ã¬ãŒãããŠããŸããOffscreenã³ã³ããŒãã³ãã«visibleããããã£ã䜿çšããŠãã¢ã¯ãã£ãã«ãããã©ãããäŒããŸãããã¿ã³ãæŒããããšãã³ã³ããŒãã³ãã¯ã¢ã¯ãã£ãã«ãªããããã¯ã°ã©ãŠã³ãã§é«ã³ã¹ããªåŠçãå®è¡ããŸããããã«ãããã³ã³ããŒãã³ããã¿ã¹ã¯ãå®è¡ããŠããéããã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãç¶æã§ããŸãã
experimental_Offscreenãšããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°ã䜿çšããã¡ãªãã
- äœæããã©ãŒãã³ã¹ã®åäžïŒéèŠã§ãªãã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãé å»¶ãããããšã§ãã¢ããªã±ãŒã·ã§ã³ã®äœæããã©ãŒãã³ã¹ãå€§å¹ ã«åäžãããããéããããå¿çæ§ã®é«ããã®ã«æããããããšãã§ããŸãã
- ã¡ã€ã³ã¹ã¬ããã®ããããã³ã°åæžïŒããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°ã¯ãé«ã³ã¹ããªã¬ã³ããªã³ã°åŠçã«ããã¡ã€ã³ã¹ã¬ããã®ããããã³ã°ãé²ããããã¹ã ãŒãºãªãŠãŒã¶ãŒäœéšãä¿èšŒããŸãã
- ãªãœãŒã¹å©çšã®æé©åïŒ
experimental_Offscreenã䜿çšãããšã衚瀺ãããŠããéèŠãªã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãåªå ã§ãããããã¢ããªã±ãŒã·ã§ã³ã®å šäœçãªãªãœãŒã¹æ¶è²»ãåæžã§ããŸãã - ãŠãŒã¶ãŒäœéšã®åäžïŒããéããããå¿çæ§ã®é«ããŠãŒã¶ãŒã€ã³ã¿ãŒãã§ãŒã¹ã¯ãããæ¥œãããããé åçãªãŠãŒã¶ãŒäœéšã«ã€ãªãããŸãã
èæ ®äºé ãšãã¹ããã©ã¯ãã£ã¹
experimental_Offscreenãšããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°ã¯ããã©ãŒãã³ã¹æé©åã®ããã®åŒ·åãªããŒã«ã§ãããæ
éã«äœ¿çšãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšãäžå¯æ¬ ã§ãã
- ããã©ãŒãã³ã¹ã®ããã«ããã¯ãç¹å®ããïŒ
experimental_Offscreenã䜿çšããåã«ãã¢ããªã±ãŒã·ã§ã³ãæ³šææ·±ãåæããããã©ãŒãã³ã¹ã®ããã«ããã¯ãåŒãèµ·ãããŠããã³ã³ããŒãã³ããç¹å®ããŸãããããã¡ã€ãªã³ã°ããŒã«ããã©ãŠã¶ã®éçºè ããŒã«ã䜿çšããŠãæé©åãå¿ èŠãªé åãç¹å®ããŠãã ããã - æŠç¥çã«äœ¿çšããïŒãã¹ãŠã®ã³ã³ããŒãã³ãã
<Offscreen>ã§ã©ããããªãã§ãã ãããããã«ã¯è¡šç€ºãããªãããŸãã¯ãŠãŒã¶ãŒäœéšã«ãšã£ãŠéèŠã§ãªãã³ã³ããŒãã³ãã«å¯ŸããŠéžæçã«äœ¿çšããŠãã ããã - ããã©ãŒãã³ã¹ãç£èŠããïŒ
experimental_Offscreenãå®è£ ããåŸãã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç£èŠããå®éã«æ¹åãããŠããããšã確èªããŸããããã©ãŒãã³ã¹ã¡ããªã¯ã¹ã䜿çšããŠã倿Žã®åœ±é¿ã远跡ããŠãã ããã - å®éšçãªæ§è³ªãèªèããïŒ
experimental_Offscreenã¯å®éšçãªAPIã§ãããå°æ¥ã®Reactã®ããŒãžã§ã³ã§å€æŽãŸãã¯åé€ãããå¯èœæ§ãããããšã念é ã«çœ®ããŠãã ãããææ°ã®Reactã®ãªãªãŒã¹ãšããã¥ã¡ã³ããåžžã«ç¢ºèªããã³ãŒãã®äºææ§ãç¶æããŠãã ããã - 培åºçã«ãã¹ãããïŒ
experimental_Offscreenãå®è£ ããåŸã¯ãã¢ããªã±ãŒã·ã§ã³ã培åºçã«ãã¹ãããæåŸ ã©ããã«åäœããŠããããšãäºæããªãå¯äœçšããªãããšã確èªããŠãã ããã - ã¢ã¯ã»ã·ããªãã£ïŒé©åãªã¢ã¯ã»ã·ããªãã£ã確ä¿ããŠãã ãããã¬ã³ããªã³ã°ã®é å»¶ããé害ãæã€ãŠãŒã¶ãŒã«æªåœ±é¿ãäžããªãããã«ããå¿ èŠããããŸããARIA屿§ããã®ä»ã®ã¢ã¯ã»ã·ããªãã£ã®ãã¹ããã©ã¯ãã£ã¹ã䜿çšããããšãæ€èšããŠãã ããã
ã°ããŒãã«ãªåœ±é¿ãšã¢ã¯ã»ã·ããªãã£ã«é¢ããèæ ®äºé
Reactã¢ããªã±ãŒã·ã§ã³ãæé©åããéã«ã¯ã倿Žãã°ããŒãã«ã«äžãã圱é¿ãšã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãéèŠã§ããããã©ãŒãã³ã¹ã®æé©åã¯ãç¹ã«éçºéäžåœãªã©ãã€ã³ã¿ãŒãããæ¥ç¶ãé ãããŸãã¯æ§èœã®äœãããã€ã¹ã䜿çšããŠãããŠãŒã¶ãŒã«å€§ããªåœ±é¿ãäžããå¯èœæ§ããããŸãã
experimental_Offscreenãšããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°ã䜿çšããããšã§ãå Žæãããã€ã¹ã®èœåã«é¢ããããããå¹
åºããŠãŒã¶ãŒå±€ã«å¯ŸããŠã¢ããªã±ãŒã·ã§ã³ã®å¿çæ§ãšã¢ã¯ã»ã·ããªãã£ãç¶æããããšãã§ããŸãã
ããã«ãã¬ã³ããªã³ã°ãé å»¶ãããéã«ã¯ãã¢ã¯ã»ã·ããªãã£ãèæ ®ããããšãéèŠã§ããæåã«é衚瀺ã«ãªã£ãŠããã³ã³ãã³ãããã¹ã¯ãªãŒã³ãªãŒããŒããã®ä»ã®æ¯æŽæè¡ã«ãšã£ãŠã¢ã¯ã»ã¹å¯èœã§ããããšã確èªããŠãã ãããé©åãªARIA屿§ã䜿çšããŠãé害ãæã€ãŠãŒã¶ãŒã«ã³ã³ããã¹ããšã¬ã€ãã³ã¹ãæäŸããŠãã ããã
ä»£æ¿ææ®µãšä»åŸã®ãã¬ã³ã
experimental_Offscreenã¯ã¬ã³ããªã³ã°ãé
å»¶ãããããã®åŒ·åãªã¡ã«ããºã ãæäŸããŸãããReactã¢ããªã±ãŒã·ã§ã³ãæé©åããããã«äœ¿çšã§ããä»ã®ãã¯ããã¯ãããŒã«ãååšããŸããäžè¬çãªä»£æ¿ææ®µã«ã¯ä»¥äžã®ãããªãã®ããããŸãã
- ã³ãŒãåå²ïŒã¢ããªã±ãŒã·ã§ã³ãããå°ããªãã³ãã«ã«åå²ãããªã³ããã³ãã§èªã¿èŸŒãã
- ã¡ã¢åïŒé«ã³ã¹ããªèšç®ã®çµæããã£ãã·ã¥ããŠãåé·ãªèšç®ãé¿ããã
- ä»®æ³åïŒå€§ããªãªã¹ããããŒãã«ã®è¡šç€ºãããŠããéšåã®ã¿ãã¬ã³ããªã³ã°ããã
- ãããŠã³ã¹ãšã¹ããããªã³ã°ïŒéå°ãªæŽæ°ãé²ãããã«ã颿°ã®åŒã³åºãé »åºŠãå¶éããã
å°æ¥çã«ã¯ãJavaScriptãšã³ãžã³ããã©ãŠã¶æè¡ããããŠReactèªäœã®é²åã«ãã£ãŠãããã«é«åºŠãªããã©ãŒãã³ã¹æé©åæè¡ãç»å ŽããããšãæåŸ ãããŸããWebãé²åãç¶ããäžã§ãããã©ãŒãã³ã¹ã®æé©åã¯ããã³ããšã³ãéçºã®éèŠãªåŽé¢ã§ããç¶ããã§ãããã
çµè«
experimental_Offscreenãšããã¯ã°ã©ãŠã³ãã¬ã³ããªã³ã°åªå
床ã¯ãReactã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãæé©åããããã®åŒ·åãªããŒã«ã§ããéèŠã§ãªãã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ãæŠç¥çã«é
å»¶ãããããšã§ãäœæããã©ãŒãã³ã¹ã倧å¹
ã«åäžãããã¡ã€ã³ã¹ã¬ããã®ããããã³ã°ãåæžãããŠãŒã¶ãŒäœéšãåäžãããããšãã§ããŸãã
ãã ããããã©ãŒãã³ã¹ãå®éã«åäžãããäºæããªãå¯äœçšãå°å
¥ããªãããã«ããããã«ã¯ãexperimental_Offscreenãæ
éã«äœ¿çšãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšãäžå¯æ¬ ã§ããReactã¢ããªã±ãŒã·ã§ã³ã«experimental_Offscreenãå®è£
ããéã«ã¯ãããã©ãŒãã³ã¹ã®ç£èŠã培åºçãªãã¹ãããããŠã¢ã¯ã»ã·ããªãã£ã®èæ
®ãå¿ããªãã§ãã ããã
Webãé²åãç¶ããäžã§ãããã©ãŒãã³ã¹ã®æé©åã¯ããã³ããšã³ãéçºã®éèŠãªåŽé¢ã§ããç¶ããŸããexperimental_Offscreenã®ãããªããŒã«ãç¿åŸããããšã§ãäžçäžã®ãŠãŒã¶ãŒã®ããã«ããéããããå¿çæ§ãé«ããããé
åçãªWebäœéšãåµé ããããšãã§ããŸãã
ãããªãåŠç¿
- Reactããã¥ã¡ã³ãïŒå®éšçAPIïŒïŒ[Offscreenãå®å®çã«ãªã£ãéã®å ¬åŒReactããã¥ã¡ã³ããžã®ãªã³ã¯]
- React ProfilerïŒ[React Profilerããã¥ã¡ã³ããžã®ãªã³ã¯]
ãããã®æŠç¥ãå®è£ ããã¢ããªã±ãŒã·ã§ã³ã®ããã©ãŒãã³ã¹ãç¶ç¶çã«ç£èŠããããšã§ãå Žæãããã€ã¹ã«é¢ããããåè¶ãããŠãŒã¶ãŒäœéšãæäŸããããšãã§ããŸãã